import { IStackStyles, Stack } from '@fluentui/react';
import { useBoolean } from '@fluentui/react-hooks';
import { useEffect, useState } from 'react';
import { Route, Routes, useLocation, useNavigate } from 'react-router';
import Alymodel from '../mysql_interface/model';
import { asyncgetcoursecatebag, asyncgetktUser, asyncgetuserUsercourse, getAllCatebag, getAllCatebagtype, getallcourse, session } from './api/api';
import { Nav } from './components/nav';
import { maxLimit } from './utils/data';
import login from './utils/login';
import Catebagview from './view/Catebag';
import CouresView from './view/Course';
import DownloadView from './view/download';
import Home from './view/home';
import Login from './view/login';
const stackStyles: Partial<IStackStyles> = {
  root: {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#434343',
    height: '64px',
    '--el-header-height': '64px'
  },
};
const stackStyles2: Partial<IStackStyles> = {
  root: {
    '--el-header-height': '64px',
  },
};

export default function App() {
  const [user, setuser] = useState<Alymodel.IMuser>()
  const [getCatebag, setCatebag] = useState<Alymodel.IMcatebag[]>([])
  const [getCatebagtype, setCatebagtype] = useState<Alymodel.IMcatebagtype[]>([])
  const [getCourse, setCourse] = useState<Alymodel.IMcourse[]>([])
  const [getuserCourse, setuserCourse] = useState<Alymodel.IMcourse[]>([])
  const [getuserUserCourse, setuserUserCourse] = useState<Alymodel.IMusercourse[]>([])
  const [getCoursecatebag, setCoursecatebag] = useState<Alymodel.IMcoursecatebag[]>([])
  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false);
  const navigator = useNavigate()
  const location = useLocation()
  useEffect(() => {
    session().then(e => {
      setuser(e)
      if (location.pathname === '/') {
        navigator('/secure/myclass')
      }
    }).catch(f => {
      login(navigator)
    })
    return () => { }
  }, [true])

  useEffect(() => {
    if (user) {
      // 获取所有课程组
      getAllCatebag({}).then(e => {
        setCatebag(e)
      })
      // 类别： ['C++', 'Python', 'Micro:bit', 'Arduino', 'Scratch', 'AI+', '创客', 'ROS']
      getAllCatebagtype({}).then(e => {
        setCatebagtype(e.sort((a, b) => Number(a.paixu) - Number(b.paixu)))
      })
      // 所有课程
      getallcourse({ _limit: maxLimit }).then(e => {
        setCourse(e)
      })
      // 获取用户课程 课程详情
      asyncgetktUser({}).then(e => {
        setuserCourse(e)
      })
      // 用户课程 course_ID - user_ID
      asyncgetuserUsercourse({}).then(e => {
        setuserUserCourse(e)
      })
      // 关系表 课程组-课程 (catebagid - cid)
      asyncgetcoursecatebag({ _limit: maxLimit }).then(e => {
        setCoursecatebag(e)
      })
      if (location.pathname === '/') {
        navigator('/secure/myclass')
      }
    }
  }, [user])

  return (
    <Stack style={{ backgroundColor: '#f5f5f5' }} styles={stackStyles2}>
      <Stack styles={stackStyles}>
        <Nav getuser={user} setshow={showModal} setuser={setuser} ></Nav>
      </Stack>
      <Routes>
        <Route path="/secure/myclass" element={
          <Home getuser={user} getCatebag={getCatebag} getCatebagtype={getCatebagtype} getCourse={getCourse} getuserCourse={getuserCourse} getuserUserCourse={getuserUserCourse} getCoursecatebag={getCoursecatebag} />
        } >
        </Route>
        <Route path="/catebag/:ID"
          element={<Catebagview getuser={user} getCatebag={getCatebag} getCatebagtype={getCatebagtype} getCourse={getCourse} getuserCourse={getuserCourse} getuserUserCourse={getuserUserCourse} getCoursecatebag={getCoursecatebag} ></Catebagview>}
        >
        </Route>
        <Route path="/course/:ID"
          element={<CouresView getuser={user} getCatebag={getCatebag} getCatebagtype={getCatebagtype} getCourse={getCourse} getuserCourse={getuserCourse} getuserUserCourse={getuserUserCourse} getCoursecatebag={getCoursecatebag} ></CouresView>}
        >
        </Route>
        <Route path="/secure/download" element={<DownloadView />

        } />
        <Route path="/login" element={<Login isModalOpen={isModalOpen} hideModal={hideModal} setuser={setuser} />
        } />
      </Routes>
    </Stack>
  )
}


